<template>
  <div>
    <div v-if="$store.state.hotel_filter.loading" class="loading">
      <img src="@/assets/image/loading.gif" alt />
    </div>
    <div v-else>
      <el-row type="flex" v-for="(item,index) in coverList.data" :key="index" class="Listparent">
        <el-col :span="8" class="coverImg">
          <img
            :src="item.photos"
            alt
            style="width:320px;height:210px;"
            @click="$router.push(`/hotel/${item.id}.html`)"
          />
        </el-col>
        <el-col :span="10" class="iteminfo">
          <div class="title" @click="$router.push(`/hotel/${item.id}.html`)">{{item.name}}</div>
          <div class="pingfen">
            {{item.alias}}
            <div v-if="item.hotellevel" class="icosparent">
              <i
                class="iconfont iconhuangguan"
                v-for="(icos,icosindex) in item.hotellevel.level"
                :key="icosindex"
                :alt="item.hotellevel.name + '级'"
              ></i>
            </div>
            {{item.hoteltype?item.hoteltype.name:null}}
          </div>
          <div class="icons">
            <el-rate v-model="item.stars" disabled text-color="#ff9900" score-template="{value}"></el-rate>
            <span class="score">{{item.stars}}分</span>
            <span>
              <em>{{item.all_remarks}}</em>
              条评价
            </span>
            <span>
              <em class="youji">{{item.very_bad_remarks}}</em>
              篇游记
            </span>
          </div>
          <div class="position">
            <i class="iconfont iconlocation"></i>
            位于:{{item.address}}
          </div>
        </el-col>
        <el-col :span="6" class="airApp">
          <div v-for="(productItem,productIndex) in item.products" :key="productIndex">
            <span>{{productItem.name}}</span>
            <span>
              <i>￥{{productItem.price}}</i>起
              <em class="el-icon-arrow-right"></em>
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
    
  </div>
</template>

<script>
export default {
  props: {
    coverList: {
      type: Object,
      default: {}
    }
  }
};
</script>

<style scoped lang="less">
.Listparent {
  margin: 20px 0;
}
.coverImg {
  cursor: pointer;
}
.iteminfo {
  .title {
    font-size: 23px;
    cursor: pointer;
  }
  .pingfen {
    display: flex;
    color: #999;
    .icosparent {
      margin: 0 5px;
      i {
        color: #ff9900;
      }
    }
  }
  .icons {
    margin: 8px 0;
    display: flex;
    align-items: center;
    .score {
      color: #f7ba2a;
    }
    i {
      font-size: 23px;
      color: #f7ba2a;
    }
    em {
      margin: 0 0px 0 35px;
      font-size: 18px;
      color: #f7ba2a;
    }
    .youji {
      margin-right: 5px;
    }
  }
  .position {
    color: #666;
  }
}
.airApp {
  > div {
    padding: 0 10px;
    display: flex;
    span {
      padding: 12px 0;
      flex: 1;
      border-bottom: 1px solid #ebeef5;
      color: rgb(96, 98, 102);
      i {
        color: #f7ba2a;
        margin-right: 5px;
      }
    }
  }
  div:hover {
    background-color: #f5f7fa;
    transition: all 0.5s;
    cursor: pointer;
  }
}
.loading {
  display: flex;
  justify-content: center;
}
</style>